<mat-card tdMediaToggle="gt-xs" [mediaClasses]="['push']">
  <mat-card-title>
    Feature Form
  </mat-card-title>
  <mat-divider></mat-divider>
  <mat-card-content class="push-bottom-none">
    <form #featureForm="ngForm">
      <div layout="row">
        <mat-form-field flex>
          <input matInput
                  #titleElement
                  #titleControl="ngModel" 
                  type="text" 
                  placeholder="Feature Title" 
                  [(ngModel)]="title" 
                  name="title" 
                  maxlength="20" 
                  required>
          <mat-hint align="start">
            <span [hidden]="titleControl.pristine || !titleControl.errors?.required" class="tc-red-600">Required</span>
          </mat-hint>
          <mat-hint align="end">{{titleElement.value.length}} / 20</mat-hint>
        </mat-form-field>
      </div>
      <div layout="row" class="push-top">
        <mat-form-field flex>
          <input matInput
                  #userElement
                  #userControl="ngModel"
                  type="text" 
                  placeholder="User" 
                  [(ngModel)]="user" 
                  name="user"
                  maxlength="30"
                  required>
          <mat-hint align="start">
            <span [hidden]="userControl.pristine || !userControl.errors?.required" class="tc-red-600">Required</span>
          </mat-hint>
          <mat-hint align="end">{{userElement.value.length}} / 30</mat-hint>
        </mat-form-field>
      </div>
      <div layout="row">
        <mat-slide-toggle [(ngModel)]="enabled" name="enabled">Enabled</mat-slide-toggle>
      </div>
    </form>
    </mat-card-content>
    <mat-divider></mat-divider>
    <mat-card-actions>
      <button mat-button [disabled]="!featureForm.valid" color="primary" (click)="save()">SAVE</button>
      <button mat-button (click)="goBack()">CANCEL</button>
    </mat-card-actions>
  </mat-card>